<template>
  <view class="main">
    <u-navbar title="请假审批" :autoBack="true"> </u-navbar>
    <view class="btn-group">
      <!--     <view class="btn">
        <u-button :type="btnType1" :custom-style="customStyle" text="请假申请" @click="btnClick(1)"></u-button>
      </view>
      <view class="btn">
        <u-button :type="btnType2" :custom-style="customStyle" text="请假记录" @click="btnClick(2)"></u-button>
      </view> -->
      <view v-for="(item, index) in tabList" :key="index" @click="tabIndex = index" style="
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        ">
        <view style="font-size: 16px; margin-bottom: 15px" :style="{ color: tabIndex == index ? '#C4AD8C' : '#000' }">
          {{ item.name }}
        </view>
        <view v-show="tabIndex == index" style="
            width: 40px;
            height: 5px;
            background-color: #c4ad8c;
            border-radius: 3px;
          ">
        </view>
      </view>
    </view>



    <view v-if="tabIndex == 0">
      <!-- 查询条件 -->
      <view class="flex-between" style="background-color: #fff; margin-top: -10px; padding: 10px">
        <view class="u-flex-1" style="margin-right: 5px" @click="typeColumnsShow = true">
          <u-input v-model="query.reasonName" readonly placeholder="选择请假类型">
            <template slot="suffix">
              <u-icon name="arrow-down"></u-icon>
            </template>
          </u-input>
        </view>
       <!-- <view style="margin-right: 5px" @click="statusColumnsShow = true">
          <u-input v-model="query.approvalName" readonly placeholder="选择审核状态">
            <template slot="suffix">
              <u-icon name="arrow-down"></u-icon>
            </template>
          </u-input>
        </view> -->

        <view>
          <u-button type="primary"
            customStyle="background:#182044;color:#C4AD8C;border-radius:7px;padding:17px;border:none;" size="small"
            text="重置" @click="reset"></u-button>
          <u-button type="primary"
            customStyle="background:#182044;color:#C4AD8C;border-radius:7px;padding:17px;border:none;margin-top:10rpx"
            size="small" text="查询" @click="refresh"></u-button>
        </view>
      </view>
      <!-- 请假列表 -->
      <view style="
          padding: 10px;
          margin: 10px;
          padding: 10px;
          background-color: #fff;
          border-radius: 12px;
        " v-for="(item, index) in checkList" :key="index" @click="goDetail(item.id, 'check')">
        <view class="flex-between">
          <view class="applyInfo">
            <view>请假类型：{{ item.reasonName }}</view>
            <view>请假时长：{{ item.leaveDays }}天</view>
            <view> 提交时间：{{ item.createTime }}</view>
          </view>
          <view style="
              align-self: flex-start;
              margin-top: 10px;
              color: #c4ad8c;
              white-space: nowrap;
            " v-if="item.approvalStatus == '1'">退回</view>
          <view style="
              align-self: flex-start;
              margin-top: 10px;
              color: #c4ad8c;
              white-space: nowrap;
            " v-if="item.approvalStatus == '2'">待审核</view>
          <view style="
              align-self: flex-start;
              margin-top: 10px;
              color: #c4ad8c;
              white-space: nowrap;
            " v-if="item.approvalStatus == '3'">审核通过</view>
          <view style="
              align-self: flex-start;
              margin-top: 10px;
              color: #c4ad8c;
              white-space: nowrap;
            " v-if="item.approvalStatus == '4'">审核未通过</view>
        </view>
      </view>
    </view>

    <!--  <view class="" style="margin: 10px;padding: 20px;background-color: #fff;border-radius: 12px;" v-if="tabIndex==0">
      <u--form :model="form" ref="uForm" labelWidth="70">
        <u-form-item label="请假类型"  @click="typeColumnsShow = true">
          <u-input v-model="form.type" readonly />
        </u-form-item>
        <u-form-item label="开始时间" @click="beginTimePickerShow = true">
          <u-input v-model="form.beginTime" readonly />
        </u-form-item>
        <u-form-item label="结束时间" @click="endTimePickerShow = true">
          <u-input v-model="form.endTime" readonly />
        </u-form-item>
        <u-form-item label="请假时长">
          <u-input v-model="form.name" readonly />
        </u-form-item>
        <u-form-item label="请假原因">
          <u--textarea v-model="form.reason" placeholder="请输入内容" confirmType="done"></u--textarea>
        </u-form-item>
        <u-form-item label="审批人">
          <u-input v-model="form.name" readonly />
        </u-form-item>
      </u--form>
      <u-button @click="submit" customStyle="background:#182044;color:#C4AD8C;border-radius:7px;margin-top:40px">提交</u-button>
    </view> -->

    <view v-if="tabIndex == 1">
      <!-- 查询条件 -->
      <view class="flex-between" style="background-color: #fff; margin-top: -10px; padding: 10px">
        <view style="margin-right: 5px" @click="typeColumnsShow = true">
          <u-input v-model="query.reasonName" readonly placeholder="选择请假类型">
            <template slot="suffix">
              <u-icon name="arrow-down"></u-icon>
            </template>
          </u-input>
        </view>
        <view style="margin-right: 5px" @click="statusColumnsShow = true">
          <u-input v-model="query.approvalName" readonly placeholder="选择审核状态">
            <template slot="suffix">
              <u-icon name="arrow-down"></u-icon>
            </template>
          </u-input>
        </view>

        <view>
          <u-button type="primary"
            customStyle="background:#182044;color:#C4AD8C;border-radius:7px;padding:17px;border:none;" size="small"
            text="重置" @click="reset"></u-button>
          <u-button type="primary"
            customStyle="background:#182044;color:#C4AD8C;border-radius:7px;padding:17px;border:none;margin-top:10rpx"
            size="small" text="查询" @click="refresh"></u-button>
        </view>
      </view>
      <!-- 请假列表 -->
      <view style="
          padding: 10px;
          margin: 10px;
          padding: 10px;
          background-color: #fff;
          border-radius: 12px;
        " v-for="(item, index) in checkList" :key="index">
        <view class="flex-between">
          <view class="applyInfo">
            <view>请假类型：{{ item.reasonName }}</view>
            <view>请假时长：{{ item.leaveDays }}天</view>
            <view> 提交时间：{{ item.createTime }}</view>
          </view>
          <view style="
              align-self: flex-start;
              margin-top: 10px;
              color: #c4ad8c;
              white-space: nowrap;
            " v-if="item.approvalStatus == '1'">退回</view>
          <view style="
              align-self: flex-start;
              margin-top: 10px;
              color: #c4ad8c;
              white-space: nowrap;
            " v-if="item.approvalStatus == '2'">待审核</view>
          <view style="
              align-self: flex-start;
              margin-top: 10px;
              color: #c4ad8c;
              white-space: nowrap;
            " v-if="item.approvalStatus == '3'">审核通过</view>
          <view style="
              align-self: flex-start;
              margin-top: 10px;
              color: #c4ad8c;
              white-space: nowrap;
            " v-if="item.approvalStatus == '4'">审核未通过</view>
        </view>
      </view>
    </view>

    <u-gap height="10" bgColor="#F8FAFB"></u-gap>
    <u-picker :show="typeColumnsShow" :columns="typeColumns" title="请假类型" @cancel="typeColumnsShow = false"
      @confirm="confirm">
    </u-picker>
    <u-picker :show="statusColumnsShow" :columns="statusColumns" title="审批状态" @cancel="statusColumnsShow = false"
      @confirm="confirm2">
    </u-picker>
    <!-- <u-picker :show="beginTimePickerShow" :columns="dateColumns" title="请假类型" @cancel="beginTimePickerShow = false;" @confirm="beginTimeConfirm">
    </u-picker> -->
    <!-- <u-datetime-picker :show="beginTimePickerShow" mode="datetime" @confirm="beginTimeConfirm"
      @cancel="beginTimePickerShow = false" :formatter="formatter" :minDate="new Date().getTime()"></u-datetime-picker> -->

    <u-datetime-picker :show="endTimePickerShow" mode="datetime" @confirm="endTimeConfirm"
      @cancel="endTimePickerShow = false" :formatter="formatter" :minDate="new Date().getTime()"></u-datetime-picker>
  </view>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from "vuex";
  import {
    getTeacherleaveCheckList,
    getCheckList,
    getTeacherLeaveReason,
    getLeaveReason,
  } from "@/api/user.js";
  export default {
    data() {
      return {
        tabIndex: 0,
        tabList: [{
            name: "请假审批",
          },
          {
            name: "审批记录",
          },
        ],
        // tabIndex:1,
        endTimePickerShow: false,
        beginTimePickerShow: false,
        typeColumnsShow: false,
        typeColumns: [
          ["事假", "病假", "年假", "其它"]
        ],
        statusColumnsShow: false,
        statusColumns: [],
        attendanceStatus: [], //审批状态
        dateColumns: [
          [],
          ["上午", "下午"]
        ],
        btnType1: "primary",
        btnType2: "",
        form: {
          beginTime: "",
          type: "",
          reason: "",
          name: "",
        },
        rules: {
          name: [{
            required: true,
            message: "请输入姓名",
            trigger: ["blur", "change"],
          }, ],
        },
        isLast: false,
        checkList: [],
        // 请求参数
        query: {
          pageNo: 1,
          pageSize: 10,
          reasonName: "",
          approvalName: "",
          approvalStatus: "",
          reasonId: "",
        },
        leaveReason: [],
      };
    },
    computed: {
      ...mapState(["userInfo", "userType", "userId", "dictDataList"]),
    },
    watch: {
      tabIndex(val) {
        this.reset();
      },
    },
    onLoad() {
      this.getClockStatus();
      this.getType();
    },
    onShow() {
      this.refresh();
      console.log(this.currentMonthDays());
      this.dateColumns[0] = this.currentMonthDays();
    },
    onReachBottom() {
      console.log("loadMore");
      this.loadMore();
    },
    methods: {
      getClockStatus() {
        let arr = this.dictDataList.filter(
          (item) => item.dictType === "attendance_approval_status"
        );
        this.attendanceStatus = arr;
        this.statusColumns = [];
        this.statusColumns.push(arr.map((v) => v.label));
      },
      getType() {
        if (this.userType == 3) {
          getTeacherLeaveReason().then((res) => {
            this.leaveReason = res.data;
            this.typeColumns = [];
            console.log(res.data.map((v) => v.leaveReason));
            this.typeColumns.push(res.data.map((v) => v.leaveReason));
          });
        } else if (this.userType == 4) {
          getLeaveReason().then((res) => {
            this.leaveReason = res.data;
            this.typeColumns = [];
            console.log(res.data.map((v) => v.leaveReason));
            this.typeColumns.push(res.data.map((v) => v.leaveReason));
          });
        }
      },
      goDetail(id, type) {
        uni.navigateTo({
          url: `/pages/user/approvalDetail?id=${id}&type=${type}`,
        });
      },
      reset() {
        this.query = {
          reasonName: "",
          reasonId: "",
          approvalName: "",
          approvalStatus: "",
          pageNo: 1,
          pageSize: 10,
        };
        this.refresh();
      },
      refresh() {
        this.checkList = [];
        this.query.pageNo = 1;
        this.isLast = false;
        this.getCheckList();
      },
      loadMore() {
        this.getCheckList();
      },
      getCheckList() {
        if (this.isLast) return;
        uni.showLoading({
          title: "加载中...",
        });
        let param = {
          ...this.query,
          copySendId: this.userId
        };
        delete param.reasonName;
        delete param.approvalName;
        if (this.tabIndex == 0) {
          // Object.assign(param,{approvalStatus:2})
          getTeacherleaveCheckList({
            ...param,
            approvalStatus: 2
          }).then(
            (res) => {
              console.log("res", res);
              this.checkList = this.checkList.concat(res.data.list);
              this.query.pageNo++;
              if (this.checkList.length == res.data.total) {
                this.isLast = true;
              }
              uni.hideLoading();
            }
          );
        } else {
          param.checkTeacherId = this.userId;
          getCheckList(param).then((res) => {
            console.log("res", res);
            if (res.data.list && res.data.list.length) {
              this.checkList = [...this.checkList, ...res.data.list];
            }
            this.query.pageNo++;
            if (this.checkList.length == res.data.total) {
              this.isLast = true;
            }
            uni.hideLoading();
          });
        }
      },

      /**
       * 获取当月的日期集合(yyyy-MM-dd)
       */
      currentMonthDays() {
        // 获取标准时间
        const date = new Date();
        // 获取当天日期
        const currentDay = date.getDate();
        // 获取当前月份（实际月份需要加1）
        const currentMonth =
          date.getMonth() + 1 < 10 ?
          "0" + (date.getMonth() + 1) :
          date.getMonth() + 1;
        const nextMonth =
          date.getMonth() + 2 < 10 ?
          "0" + (date.getMonth() + 2) :
          date.getMonth() + 2;
        // 获取当前年份
        const currentYear = date.getFullYear();
        // 获取当前月有多少天
        const currentMonthDays = new Date(currentYear, currentMonth, 0).getDate();
        const nextMonthDays = new Date(
          currentYear,
          currentMonth + 1,
          0
        ).getDate();
        // 当前月份所有日期集合
        const currentMonthArr = [];
        const nextMonthArr = [];
        for (let day = 1; day <= currentMonthDays; day++) {
          // 截至当前日期为止
          if (day >= currentDay) {
            // 年月日(yyyy-MM-dd)
            let dateItem =
              currentYear +
              "-" +
              currentMonth +
              "-" +
              (day < 10 ? "0" + day : day);
            currentMonthArr.push(dateItem);
          }
        }
        for (let day = 1; day <= nextMonthDays; day++) {
          let dateItem =
            currentYear + "-" + nextMonth + "-" + (day < 10 ? "0" + day : day);
          currentMonthArr.push(dateItem);
        }
        return currentMonthArr;
      },
      formatter(type, value) {
        // console.log(type)
        if (type === "year") {
          return `${value}年`;
        }
        if (type === "month") {
          return `${value}月`;
        }
        if (type === "day") {
          return `${value}日`;
        }
        if (type === "hour") {
          return `${value}时`;
        }
        if (type === "minute") {
          return `${value}分`;
        }
        return value;
      },
      endTimeConfirm(e) {
        this.endTimePickerShow = false;
        let date = new Date(e.value);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        if (month < 10) {
          month = "0" + month;
        }
        let day = date.getDay() + 1;
        if (date < 10) {
          date = "0" + date;
        }
        let hour = date.getHours();
        if (hour < 10) {
          hour = "0" + hour;
        }
        let mins = date.getMinutes();
        if (mins < 10) {
          mins = "0" + mins;
        }
        this.form.endTime =
          year + "-" + month + "-" + day + " " + hour + ":" + mins + ":" + "00";

        // console.log(e)
        // console.log(this.form.beginTime)
      },

      beginTimeConfirm(e) {
        console.log(e);
        this.beginTimePickerShow = false;
        let date = new Date(e.value);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        if (month < 10) {
          month = "0" + month;
        }
        let day = date.getDay() + 1;
        if (date < 10) {
          date = "0" + date;
        }
        let hour = date.getHours();
        if (hour < 10) {
          hour = "0" + hour;
        }
        let mins = date.getMinutes();
        if (mins < 10) {
          mins = "0" + mins;
        }
        this.form.beginTime =
          year + "-" + month + "-" + day + " " + hour + ":" + mins + ":" + "00";

        console.log(e);
        console.log(this.form.beginTime);
      },
      confirm(e) {
        console.log(e);
        if (this.tabIndex == 0) {
          this.form.type = e.value[0];
          this.form.reasonId = this.leaveReason[e.indexs[0]].id;
          console.log(this.form.reasonId);
        }
        this.query.reasonName = e.value[0];
        this.query.reasonId = this.leaveReason[e.indexs[0]].id;
        this.typeColumnsShow = false;
        this.refresh();
      },
      confirm2(e) {
        console.log("e", e);
        this.query.approvalName = e.value[0];
        this.query.approvalStatus = this.attendanceStatus[e.indexs[0]].value;
        this.statusColumnsShow = false;
        this.refresh();
      },
      submit() {
        this.$refs.uForm
          .validate()
          .then((res) => {
            uni.$u.toast("校验通过");
          })
          .catch((errors) => {
            uni.$u.toast("校验失败");
          });
      },
      open(e) {
        // console.log('open', e)
      },
      close(e) {
        // console.log('close', e)
      },
      change(e) {
        // console.log('change', e)
      },
      btnClick(flag) {
        this.tabIndex = flag;
        if (flag == 1) {
          this.btnType1 = "primary";
          this.btnType2 = "default";
          return;
        }
        this.btnType1 = "default";
        this.btnType2 = "primary";
      },
    },
  };
</script>

<style>
  page {
    background: #f8fafb;
  }
</style>
<style lang="scss" scoped>
  .main {
    widht: 100%;
    height: 100%;

    .applyInfo {
      view {
        padding: 10px 0;
      }
    }

    .clock-btn {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translateX(-50%);
    }

    .click-btn {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: cornflowerblue;
      padding: 10px;
      line-height: 40px;
      text-align: center;
    }

    .clock {
      display: flex;
      flex-flow: wrap;

      .clock-item {
        flex: 1 0 50%;
        padding: 10px 0;
      }
    }

    .time {
      padding: 10px;
    }
  }

  .btn-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 44px;
    padding: 10px 10px;
    background-color: #fff;

    .btn {
      width: 45%;
    }
  }

  /deep/ .u-reset-button::after {
    border: 1px solid #ccc;
  }

  /deep/ .u-button {
    // width: 40%;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  uni-button {
    margin: 0;
  }

  ::v-deep .u-toolbar__wrapper__confirm {
    color: #3c9cff;
    font-size: 15px;
    padding: 3px 18px;
    color: #c4ad8c !important;
    border: 1px solid #c4ad8c;
    border-radius: 16px;
    margin-right: 20rpx;
  }

  // ::v-deep .u-toolbar__wrapper__cancel{
  //   span{
  //     background-color: #f5f5f5;
  //     border-radius: 50%;
  //     padding:2px 5px;
  //     width: 10px;
  //     height: 10px;
  //     line-height: 10px;
  //   }
  // }
  ::v-deep .u-picker__view__column__item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-align: center;
    display: block;
    /* color: #303133; */
    color: #c4ad8c;
  }
</style>
